<template>
  <div class="page-view">
    <appDownload ref="download" />
    <div class="class-info-top">
      <div
        class="class-name"
        :class="{'class-name-width': !liveInfo.AudioPath}"
      >
        {{ SectionName }}
      </div>
      <div
        v-if="liveInfo.AudioPath"
        class="audio-frequency"
      >
        收听音频
      </div>
      <router-link
        :to="{name: 'home'}"
        class="back-home"
      >
        返回首页
      </router-link>
      <Share
        ref="share"
        :subject="$route.query.title"
        tag="img"
        :src="require('assets/share/share_class_info.png')"
        class="share"
      />
    </div>
    <div
      class="video-class"
    >
      <LivePlayer
        v-if="getInfoSuccess"
        :live-info="liveInfo"
        @tryAgain="getLiveInfo"
        @hasLiving="getHasLiving"
        @curLiveStatus="getCurLiveStatus"
      />
    </div>
    <div class="tabs-view">
      <van-tabs
        color="#03C9BB"
        title-active-color="#333333"
        :line-height="3"
        :line-width="activeBarWidth"
      >
        <van-tab
          title="互动"
        >
          <ChatInput
            :live-status="curLiveStatus"
            :show-chat="showChat"
            class="chat-footer"
            @liveStatus="curLiveStatus = $event"
          />
        </van-tab>
        <van-tab title="详情">
          <CourseIntroduce :course-info="liveInfo" />
          <router-link
            :to="{name: 'classDetail',query: {
              classId: ClassId,
              title: $route.query.className
            }}"
            class="more-course"
            tag="div"
          >
            ———— &nbsp;学习更多课程 &nbsp; ————
          </router-link>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import store from '@/store/store'
export default Vue.extend({
  components: {
    appDownload: () => import('components/AppDownload/AppDownload.vue'),
    CourseIntroduce: () => import('components/Class/CourseDetail_Introduce.vue'),
    LivePlayer: () => import('components/Live/LivePlayer.vue'),
    ChatInput: () => import('components/Live/ChatInput.vue'),
    Share: () => import(/* webpackChunkName: "Share" */ 'components/Share/SharePoster.vue'),
  },
  data () {
    return {
      activeBarWidth: Math.floor(document.documentElement!.clientWidth / 2),
      SectionName: this.$route.query.sectionName,
      SectionId: this.$route.query.sectionId,
      ClassId: this.$route.query.classId,
      getInfoSuccess: false, // 直播详情获取成功
      liveInfo: {
        CourseName: '',
        CourseImg: '',
        CourseDesc: '',
        TeacherName: '',
        TeacherImg: '',
        TeacherDesc: '',
        LiveUrlM3u8: '',
        LiveStatus: 1, // 直播状态 1：直播中2：未开始3：直播结束4：老师正在赶来的路上5：直播暂停
        IsUnionLive: false,
        IsAudition: true,
        IsBuy: false,
        AuditionTime: 0,
        AudioPath: '',
      },
      hasLiving: false,
      curLiveStatus: 0,
    }
  },
  computed: {
    // 直播状态判断是否显示聊天记录
    showChat (): boolean {
      if (this.hasLiving) {
        return true
      }
      if ([0, 2, 3, 4].indexOf(this.curLiveStatus) !== -1) {
        return false
      }
      return true
    },
  },
  created () {
    this.getLiveInfo()
  },
  methods: {
    // 获取直播信息
    getLiveInfo () {
      this.$axios({
        url: 'Live/LiveDetailForH5',
        method: 'get',
        data: {
          LiveId: this.SectionId,
          ClassId: this.ClassId,
        },
      }).then(res => {
        this.$set(this.$data, 'liveInfo', res)
        this.getInfoSuccess = true
        this.curLiveStatus = res.LiveStatus
      })
    },

    getHasLiving () {
      this.hasLiving = true
    },

    getCurLiveStatus (curStatus: number) {
      this.curLiveStatus = curStatus
    },

  },
})
</script>

<style lang="scss" scoped>
.page-view {
  height: 100%;
  background-color: #fff;
}
.class-info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 94px;
  background-color: #fff;
}
.class-name {
  width: calc(100% - 340px);
  padding-right: 30px;
  padding-top: 3px;
  font-size: 36px;
  color: #333333;
  @include ellipsis;
}
.class-name-width {
  width: calc(100% - 220px);
}
.audio-frequency,.back-home {
  width: 120px;
  font-size: 28px;
  color: #00CCCC;
}
.audio-frequency {
  margin-right: 30px;
}
.share {
  width: 40px;
  margin-left: 30px;
}
.video-class {
  width: 100%;
  height: 393px;
  padding: 0 24px;
  text-align: center;
}
.more-course {
  font-size: 28px;
  color: $primary-web;
  margin: 10px auto;
  text-align: center;
  margin-bottom: 40px;
}
.tabs-view {
  height: calc(100% - 580px);
  min-height: 380px;
  overflow-y: scroll;
  /deep/ {
    .van-ellipsis {
      font-size: 32px;
    }
    .van-tabs__line {
      border-radius: 0px !important;
    }
    .van-tabs--line {
      height: 100%;
    }
    .van-tabs__content {
      background: #F3F3F3;
      height: 100%;
      -webkit-overflow-scrolling: touch;
      overflow: scroll;
    }
    .van-tab__pane {
      height: 100%;
    }
  }
}
</style>
